<template>
  <div class="fun_role">
    <div v-for="(one, oneIndex) in menuData" :key="oneIndex">
      <el-collapse accordion v-model="activeNames">
        <div class="main">
          <el-collapse-item style="width: 100%" :name="oneIndex">
            <template slot="title">
              <div class="title">
                <!-- 一级 权限列表-->
                <el-checkbox
                  :indeterminate="one.indeterminate"
                  v-model="one.checked"
                  @change="checkedOneAll(oneIndex, one.id, $event)"
                  :key="oneIndex"
                  >{{ one.menuName }}
                </el-checkbox>
                <!-- 保存 -->
                <span class="save_btn"
                  ><el-button
                    size="mini"
                    type="primary"
                    @click="onSaveMenu(one)"
                  >
                    保存
                  </el-button></span
                >
              </div>
            </template>
            <!-- 二级 权限列表-->
            <div
              v-for="(two, twoIndex) in one.children"
              :key="twoIndex"
              class="row"
            >
              <div class="menu">
                <el-checkbox
                  v-model="two.checked"
                  @change="checkedTwoAll(oneIndex, twoIndex, two.id, $event)"
                  :indeterminate="two.indeterminate"
                  >{{ two.menuName }}
                </el-checkbox>
              </div>
              <div class="btns">
                <!-- 三级 权限列表   -->
                <el-checkbox
                  v-for="(three, threeIndex) in two.children"
                  :key="threeIndex"
                  v-model="three.checked"
                  :title="three.menuName"
                  @change="checkedThreeAll(oneIndex, twoIndex, threeId, $event)"
                  >{{ three.menuName }}
                </el-checkbox>
              </div>
            </div>
          </el-collapse-item>
        </div>
      </el-collapse>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    roleList: {
      type: Array,
      default: () => {
        return [
          {
            id: 73,
            menuName: "地图",
            checked: false,
            children: [
              {
                id: 35,
                menuName: "实时态势",
                children: [
                  {
                    id: 1,
                    menuName: "test",
                    checked: false,
                  },
                ],
              },
              {
                id: 69,
                menuName: "态势",
                checked: false,
                children: [
                  {
                    id: 73,
                    menuName: "添加",
                    checked: false,
                  },
                  {
                    id: 173,
                    menuName: "删除",
                    checked: false,
                  },
                ],
              },
            ],
          },
          {
            id: 68,
            menuName: "统计图",
            checked: false,
            children: [
              {
                id: 21,
                menuName: "图表",
                checked: false,
                children: [],
              },
            ],
          },
          {
            id: 111,
            menuName: "禁飞区列表",
            checked: false,
            children: [
              {
                id: 125,
                menuName: "禁飞区",
                checked: false,
                children: [{ id: 125, menuName: "添加", checked: false }],
              },
            ],
          },
        ];
      },
    },
    checkedRoleList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    isFlod: {
      type: Boolean,
      default: false,
    },
    activeArr: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      activeNames: [],
      // activeArr: [],
      menuData: [],
      isCheckAll: false, //一级全选状态
      indeterminate: false,
      checkList: [],
    };
  },

  computed: {},
  created() {
    this.checkList = this.checkedRoleList;
    this.menuData = this.roleList;
    this.getList();
  },
  mounted() {},
  watch: {
    roleList: {
      deep: true,
      handler(v) {
        this.menuData = v;
      },
    },
    isFlod: {
      deep: true,
      handler(v) {
        if (v) {
          this.activeNames = this.activeArr;
        } else {
          this.activeNames = [];
        }
        console.log(v, this.activeNames, this.activeArr, "v");
      },
    },
  },
  filters: {
    filterName(value) {
      return value.substring(0, 5) + "...";
    },
  },
  methods: {
    getCheckedData(data) {
      let arr = [];
      if (data.checked) {
        arr.push(data.id);
      }
      if (data.children && data.children.length > 0) {
        data.children.map((twoItem) => {
          if (twoItem.checked) {
            arr.push(twoItem.id);
          }
          if (twoItem.children && twoItem.children.length > 0) {
            twoItem.children.map((threeItem) => {
              if (threeItem.checked) {
                arr.push(threeItem.id);
              }
            });
          }
        });
      }
      return arr;
    },
    // 保存
    onSaveMenu(one) {
      const arr = this.getCheckedData(one);
      const data = {
        menuNewIds: arr,
      };
      this.$emit("onSaveMenu", data);
    },
    //总change事件
    checkAll(e) {
      this.ischeckAll = e;
      if (e === true) {
        this.indeterminate = false;
        for (var i = 0, len = this.menuData.length; i < len; i++) {
          //二级全选反选不确定
          this.menuData[i].checked = e;
          this.menuData[i].indeterminate = false;
          for (
            var j = 0, len1 = this.menuData[i].children.length;
            j < len1;
            j++
          ) {
            this.menuData[i].children[j].checked = e;
            for (
              var k = 0, len2 = this.menuData[i].children[j].children.length;
              k < len2;
              k++
            ) {
              this.menuData[i].children[j].children[k].checked = e;
            }
          }
        }
      } else {
        this.indeterminate = false;
        for (var i = 0, len = this.menuData.length; i < len; i++) {
          //三级全选反选不确定
          this.menuData[i].checked = e;
          this.menuData[i].indeterminate = false;
          for (
            var j = 0, len1 = this.menuData[i].children.length;
            j < len1;
            j++
          ) {
            this.menuData[i].children[j].checked = e;
            for (
              var k = 0, len2 = this.menuData[i].children[j].children.length;
              k < len2;
              k++
            ) {
              this.menuData[i].children[j].children[k].checked = e;
            }
          }
        }
      }
    },
    //一级change事件
    checkedOneAll(oneIndex, oneId, e) {
      console.log(oneId, "oneId");
      this.menuData[oneIndex].checked = e; //一级勾选后，子级全部勾选或者取消
      if (e) {
        //去掉一级不确定状态
        this.menuData[oneIndex].indeterminate = false;
      } else {
        this.menuData[oneIndex].children.map((item) => {
          this.$set(item, "checked", e);
        });
      }
      // let childrenArray = this.menuData[oneIndex].children;
      // if (childrenArray.length > 0) {
      //   childrenArray.forEach((oneItem) => {
      //     oneItem.checked = e;
      //     if (oneItem.children.length > 0) {
      //       oneItem.children.forEach((twoItem) => {
      //         twoItem.checked = e;
      //       });
      //     }
      //   });
      // }
      this.getIsCheckAll();
    },
    //二级change事件
    checkedTwoAll(oneIndex, twoIndex, twoId, e) {
      if (e) {
        this.menuData[oneIndex].checked = true;
      }
      if (
        this.menuData[oneIndex].children[twoIndex].children &&
        this.menuData[oneIndex].children[twoIndex].children.length > 0
      ) {
        if (!e) {
          this.menuData[oneIndex].children[twoIndex].children.map((item) => {
            this.$set(item, "checked", e);
          });
        }
        let isCheckedArr = this.menuData[oneIndex].children[
          twoIndex
        ].children.filter((item) => item.checked);
        let checkedCount = isCheckedArr.length;
        this.menuData[oneIndex].children[twoIndex].indeterminate =
          checkedCount > 0 &&
          checkedCount <
            this.menuData[oneIndex].children[twoIndex].children.length;

        // let isCheckedOne = this.menuData[oneIndex].children.filter((item) => item.checked);
        // let checkedSum = isCheckedOne.length;
        // this.menuData[oneIndex].indeterminate =
        //   checkedSum > 0 &&
        //   checkedSum <
        //     this.menuData[oneIndex].children.length;
      }
    },
    //三级change事件
    checkedThreeAll(oneIndex, twoIndex, threeId, e) {
      // console.log(this.menuData[oneIndex].children[twoIndex].children[threeIndex])
      if (e) {
        this.menuData[oneIndex].checked = true;
      }
      if (
        this.menuData[oneIndex].children[twoIndex].children &&
        this.menuData[oneIndex].children[twoIndex].children.length > 0
      ) {
        let isCheckedArr = this.menuData[oneIndex].children[
          twoIndex
        ].children.filter((item) => item.checked);
        let checkedCount = isCheckedArr.length;
        let isBol = this.menuData[oneIndex].children[twoIndex].children.every(
          (item) => item.checked
        );
        this.menuData[oneIndex].children[twoIndex].checked = isBol;
        this.menuData[oneIndex].children[twoIndex].indeterminate =
          checkedCount > 0 &&
          checkedCount <
            this.menuData[oneIndex].children[twoIndex].children.length;
      }
    },
    /**
     *是否全选
     */
    getIsCheckAll() {
      var tickCount = 0,
        unTickCount = 0,
        ArrLength = this.menuData.length;
      for (var j = 0; j < ArrLength; j++) {
        //全选checkbox状态
        if (this.menuData[j].checked === true) tickCount++;
        if (this.menuData[j].checked === false) unTickCount++;
      }
      if (tickCount === ArrLength) {
        //二级全勾选
        this.isCheckAll = true;
        this.indeterminate = false;
      } else if (unTickCount === ArrLength) {
        //二级全不勾选
        this.isCheckAll = false;
        this.indeterminate = false;
      } else {
        this.isCheckAll = false;
        this.indeterminate = true; //添加一级不确定状态
      }
    },
    /**
     * 获取列表数据
     *
     */
    getList() {
      this.menuData.forEach((oneItem, oneIndex) => {
        if (oneItem.children.length > 0) {
          let oneCountNum = oneItem.children.length;
          let isOneCheckedNum = 0;
          oneItem.children.forEach((twoItem) => {
            if (twoItem.checked) {
              isOneCheckedNum += 1;
            }
            if (twoItem.children.length > 0) {
              let twoCountNum = twoItem.children.length;
              let isTwoCheckedNum = 0;
              twoItem.children.forEach((three) => {
                if (three.checked) {
                  isTwoCheckedNum += 1;
                }
              });
              twoItem.checked = isTwoCheckedNum === twoCountNum;
              twoItem.indeterminate =
                isTwoCheckedNum > 0 && isTwoCheckedNum < twoCountNum;
            }
          });
          oneItem.checked = isOneCheckedNum === oneCountNum;
          oneItem.indeterminate =
            isOneCheckedNum > 0 && isOneCheckedNum < oneCountNum;
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.fun_role {
  .title {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 20px;
    margin: 10px 0;
    line-height: 40px;
    font-size: 20px;
    font-weight: 700;
    // background-color: #d7d7d7;
    .save_btn {
      margin-top: -3px;
    }
  }
  .main {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background-color: #f9f8f8;
    .row {
      display: flex;
      width: 100%;
      border: 1px solid #000;
      border-bottom: none;
      .menu {
        display: flex;
        width: 200px;
        padding: 15px;
        box-sizing: border-box;
        border-right: 1px solid #000;
      }
      .btns {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        padding: 15px;
        box-sizing: border-box;
      }
    }
    .row:last-child {
      border-bottom: 1px solid #000;
    }
  }
  ::v-deep .el-collapse-item__header {
    background-color: #d7d7d7;
  }
}
</style>